<template>
  <div>
    <div class="button-group">
      <button class="confirm-button" @click="confirmTransfer">调入确认</button>
      <button class="cancel-button" @click="cancelTransfer">取消调拨</button>
      <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="Refresh"></right-toolbar> -->
    </div>
    <table>
      <thead>
        <tr>
          <th>状态</th>
          <th>单据编号</th>
          <th>调出日期</th>
          <th>调出管理员</th>
          <th>调出公司</th>
          <th>调入日期</th>
          <th>调入管理员</th>
          <th>调入公司</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in transferList" :key="item.id">
          <td>{{ item.status }}</td>
          <td>{{ item.documentNumber }}</td>
          <td>{{ item.outDate }}</td>
          <td>{{ item.outAdmin }}</td>
          <td>{{ item.outCompany }}</td>
          <td>{{ item.inDate }}</td>
          <td>{{ item.inAdmin }}</td>
          <td>{{ item.inCompany }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
export default {
  data() {
    return {
    };
  },
  methods: {
    confirmTransfer() {
      alert('确认调入操作');
    },
    cancelTransfer() {
      alert('取消调拨操作');
    }
  }
};
</script>

<style scoped>
.button-group {
  display: flex;
  margin: 8px 10px;
}
button {
  width:76px ;
  height: 32px;
  font-size: 11px;
  margin-right: 10px;
  padding: 3px 15px;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.confirm-button {
  background-color: #80adfa;
}
.cancel-button {
  background-color: #ffffff;
  color:black;
}
table {
  width: 100%;
  height: 700px;
  border-collapse: collapse;
  margin-left: 14px;
  background-color:#fff ;
}
th,
td {
  border: 1px solid #fff;
  padding: 8px;
  text-align: left;
  font-size: 15px;
}
th {
  background-color: #fff;
  border-bottom:1px solid #e6e8eb ;
  border-right: 1px solid #e6e8eb;
  font-size: 12px;
 
}
</style>